<template>
	<div class="edita-ddress-page">
		<van-nav-bar left-arrow @click-left="$router.back()">
			<template #title>
				{{ name }}
			</template>
			<template #right>
				<van-icon name="ellipsis" size="18" />
			</template>
		</van-nav-bar>

		<!-- 地址编辑组件 -->
		<van-address-edit
			:area-list="areaList"
			show-search-result
			show-delete
			:address-info="addressInfo"
			:tel-validator="validator"
			:search-result="searchResult"
			:area-columns-placeholder="['请选择', '请选择', '请选择']"
			@save="onSave"
			@delete="onDelete"
			@change-detail="onChangeDetail"
			@change-area="areaChange"
		/>
	</div>
</template>

<script>
// import { Dialog } from "vant";
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
// import _ from "underscore";
export default {
	data() {
		return {
			name: "",
			areaList,
			searchResult: [],
			addressInfo: {}, //收获人的初始信息
			areaCode: "",
			list: [],
			type: "",
		};
	},
	created() {
		console.log(this.areaList);
		// console.log(this.$route.query.addressId == undefined);
		this.type = this.$route.query.type;
		if (this.$route.query.addressId) {
			this.name = "编辑地址";
			this.refreshAddress();
		} else {
			this.name = "新增地址";
		}

		// console.log(this.$route.query);
		this.$axios
			.get("/address", { pageNumber: 1, pageSize: 1000 })
			.then((data) => {
				this.list = data.data.map((item) => {
					return {
						address:
							item.provinceName +
							item.cityName +
							item.regionName +
							item.detailAddress,
						id: item.addressId,
						isDefault: item.defaultFlag,
						name: item.userName,
						tel: item.userPhone,
					};
				});
				console.log(this.list);
			});
	},

	//取消下面的导航栏
	mounted() {
		// console.log(this.areaList);
		this.$parent.showTabbar = false;
	},
	destroyed() {
		this.$parent.showTabbar = true;
	},

	methods: {
		// async init() {
		//   _.forEach(this.areaList.city_list, (o, c) => {
		//     if (o == this.addressInfo.provinceName) {
		//       let cityId = String(_.take(c, 2));
		//       _.forEach(this.areaList.county_list, (i, a) => {
		//         if (i == this.addressInfo.cityName) {
		//           let districtId = String(_.take(a, 2));
		//           if (cityId == districtId) {
		//             this.areaCode = a;
		//           }
		//         }
		//       });
		//     }
		//   });
		// },

		validator(e) {
			let myreg1 = /^[1][3,4,5,7,8][0-9]{9}$/;
			let myreg2 = /^[2][3,4,5,7,8][0-9]{6}$/;
			if (!myreg1.test(e) && !myreg2.test(e)) {
				return false;
			} else {
				return true;
			}
		},
		areaChange(val) {
			console.log(val);
		},
		refreshAddress() {
			let addressId = this.$route.query.addressId;
			this.$axios.get("/address/" + addressId).then((data) => {
				console.log(data.data);
				// const {
				// 	addressId,
				// 	userName,
				// 	userPhone,
				// 	provinceName,
				// 	cityName,
				// 	regionName,
				// 	detailAddress,
				// 	isDefault,
				// } = data.data;
				// this.addressInfo = {
				// 	id: addressId,
				// 	name: userName,
				// 	tel: userPhone,
				// 	// areaCode: this.getAreaId(provinceName,cityName, regionName),
				// 	areaCode: "130372",

				// 	addressDetail: detailAddress,
				// 	isDefault: !!isDefault,
				// };
				// console.log(provinceName, cityName, regionName);
				// let p = this.getAreaId(provinceName, "province_list");
				// // let c = this.getAreaId(cityName, "city_list");
				// // let r = this.getAreaId(regionName, "county_list");
				// console.log(p);
			});
		},
		getAreaId(val, obj) {
			for (const item in this.areaList[obj]) {
				if (this.areaList[obj][item] === val) {
					console.log(val);
					return item;
				}
			}
			// for(const it in this.areaList)
		},
		onSave(content) {
			const params = {
				userName: content.name,
				userPhone: content.tel,
				provinceName: content.province,
				cityName: content.city,
				regionName: content.county,
				detailAddress: content.addressDetail,
				defaultFlag: content.isDefault ? 1 : 0,
			};
			const contentAddress =
				content.province +
				content.city +
				content.county +
				content.addressDetail;
			console.log(contentAddress);
			// 新增地址
			if (!this.$route.query.addressId) {
				if (this.list.length == 0) {
					this.$axios.post("/address", params).then((data) => {
						console.log(data);
						Toast("添加成功");
						setTimeout(() => {
							this.$router.push("/address");
						}, 1000);
					});
					return;
				}
				// 查找地址，是否有相同的地址
				// this.list.forEach((item) => {
				// 	console.log(contentAddress);
				// 	if (
				// 		item.address == contentAddress &&
				// 		item.name == content.name &&
				// 		item.tel == content.tel
				// 	) {
				// 		console.log(1);
				// 		Dialog.confirm({
				// 			message: "该地址已存在,请前往购买吧",
				// 			theme: "round-button",
				// 		}).then(() => {
				// 			this.$router.push("/address");
				// 		});
				// 	}
				// else {
				// console.log(2);
				// this.$axios.post("/address", params).then((data) => {
				// 	console.log(data);
				// 	Toast("添加成功");
				// 	setTimeout(() => {
				// 		this.$router.push("/address");
				// 	}, 1000);
				// });
				// }
				// });
			} else {
				// 编辑地址
				this.refreshAddress();
				// let addressId = this.$route.query.addressId;
				// console.log(addressId);
				// this.$axios.get("/address" + addressId).then((data) => {
				//   console.log(data);
				// });
				Toast("保存成功");
				setTimeout(() => {
					this.$router.push("/address");
				}, 1000);
			}
		},
		onDelete() {
			let addressId = this.$route.query.addressId;
			this.$axios.delete("/address/" + addressId).then((data) => {
				console.log(data.data);
			});
			Toast("删除成功");
			setTimeout(() => {
				this.$router.push("/address");
			}, 1000);
		},

		onChangeDetail(val) {
			if (val) {
				this.searchResult = [
					{
						name: "黄龙万科中心",
						address: "杭州市西湖区",
					},
				];
			} else {
				this.searchResult = [];
			}
		},
	},
};
</script>

<style lang="scss">
.van-address-edit {
	.van-address-edit__buttons {
		.van-button--danger {
			color: #fff;
			background-color: #1baeae;
			border: 1px solid #1baeae;
		}
	}
}
</style>
